import { useState, forwardRef, useImperativeHandle } from "react";
import styles from "./index.module.less";
import { IconClose } from "@arco-design/web-react/icon";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import ChatApi from "@/api/chat/chat-api";
const InviteGiftUrlInfo = forwardRef((props, ref) => {
  const [pageState, setPageState] = useState(false);
  const [customPrompt, setCustomPrompt] = useState("");
  useImperativeHandle(ref, () => {
    return {
      getPage,
      hidePage,
    };
  });

  const getPage = () => {
    setPageState(true);
  };

  const hidePage = () => {
    setPageState(false);
  };

  // 提交
  const handlerSubmit = async () => {
    try {
      let res = await ChatApi.saveOrUpdatePromptTemplate({
        content: customPrompt,
      });
    } catch (error) {
      console.log(error);
    }
  };

  return pageState ? (
    <div className={styles.updatePromptWarp}>
      <div className="custom_dialog-content">
        <div className="custom_dialog-head">
          <div className="title">添加常用提示语</div>
          <IconClose
            fontSize={20}
            onClick={hidePage}
            className="closeBtn"
            style={{ color: "#000" }}
          ></IconClose>
        </div>
        <div className="detail-content">
          <TextField
            className="w-full"
            multiline
            rows={4}
            label="常用语"
            value={customPrompt}
            onChange={(e) => {
              setCustomPrompt(e.target.value);
            }}
          />
        </div>

        <div className="content-footer">
          <Stack spacing={2} direction="row">
            <Button size="small" variant="outlined">
              取消
            </Button>
            <Button
              onClick={handlerSubmit}
              disabled={!customPrompt}
              size="small"
              variant="contained"
            >
              确定
            </Button>
          </Stack>
        </div>
      </div>
    </div>
  ) : (
    ""
  );
});

export default InviteGiftUrlInfo;
